<template>
	<view class="estimate">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">评论列表</block>
		</cu-custom>		
		<view class="list" v-if="list.length">
			<view class="item" v-for="(item, idx) in list" :key="idx">
				<view class="title">
					<view class="user">
						<image class="avatar" :src="item.weixin_headimgurl"></image>
						<view class="info">
							<view>{{ item.weixin_name }}</view>
							<view class="level">
								<image :src="item.level >= x ? '/static/start_act.png' : '/static/start.png'" v-for="x in 5" :key="x"></image>
							</view>
						</view>
					</view>
					<view class="time">{{ item.createtime }}</view>					
				</view>
				<view class="content">
					<view class="detail">{{ item.discuss }}</view>
					<view class="list" v-if="item.discussimg.length">
					</view>
				</view>
			</view>
		</view>
		<empty-data v-else src="/static/noevalute.png">抢沙发~</empty-data>
	</view>
</template>

<script>
	import { EvaluateList } from '@/common/api'
	export default {
		name:'estimate',
		data () {
			return {
				list: [],
				params: {
					pagea: 1,
					num: 10,
					product_id: ''
				}
			}
		},
		onLoad (options) {
			this.params.product_id = options.product_id
			this.getList()
		},
		onReachBottom () {
			this.params.pagea++
			this.getList()
		},
		methods: {
			getList () {
				uni.showLoading()
				EvaluateList(this.params).then(res => {
					uni.hideLoading()
					if (res.length) {
						let data = res.map(item => {
							item.discussimg = item.discussimg.filter(m => m)
							item.weixin_name = item.weixin_name ? item.weixin_name : '匿名用户'
							item.weixin_headimgurl = item.weixin_headimgurl ? item.weixin_headimgurl : '/static/avatar.png'
							return item
						})
						this.list = [...this.list, ...data]						
					} else {
						if (this.params.pagea !== 1) {
							uni.showToast({
								icon: 'none',
								title: '没有更多了~'
							})							
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less';	
.estimate {
	overflow: hidden;
	.list {
		background-color: white;
		overflow: hidden;
		.item {
			margin: 20upx 15upx;
			box-shadow:0 8upx 18upx 0 #f5f5f5;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.user {
					display: flex;
					align-items: center;
					.avatar {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						overflow: hidden;
						display: block;
						margin-right: 15upx;
					}
					.info {
						& > view {
							font-size: @minSize;
							&.level {
								display: flex;
								padding-top: 6upx;
								image {
									width: 20upx;
									height: 20upx;
									display: block;
									&:not(:last-of-type) {
										margin-right: 6upx;
									}
								}
							}							
						}
					}
				}
				.time {
					font-size: @minSize;
					color: @gray;
				}
			}
			.content {
				font-size: @medium;
				padding: 20upx 15upx 10upx;
				.detail {
					padding-bottom: 10upx;
				}
				.list {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20upx;
					image {
						width: 220upx;
						height: 220upx;
						display: block;
						margin: 0 10upx 10upx 0; 
					}
				}
			}
		}
	}
}	
</style>
